<template>
	<view class="submit-box">
		<head-bar-view title="巡查结果" title-color="#fff" is-white-back="true" />
		<view class="tabs">
			<view v-for="(item,index) in taskUnitFiles" :class="currentId==index?'tab active':'tab'"
				@click="changeTab(index)">
				{{item.name}}
			</view>
		</view>
		<view class="option-list" v-if="taskUnitFiles.length>0">
			<view class="item" v-for="item in taskUnitFiles[currentId].children">
				<view class="row" style="margin-left: 10rpx;">
					{{item.name}}
				</view>
				<view class="row">
					<view class="label">
						<text style="color: red;margin-right: 4rpx;">*</text>
						检查结果:
					</view>
					<radio-group @change="(e)=>radioChange(e,item)" style="display: flex;">
						<label style="display: flex;align-items: center;margin-right: 20rpx;">
							<view>
								<radio value="1" :checked="item.checkResult ==1" disabled
									style="transform:scale(0.7)" />
							</view>
							<view>正常</view>
						</label>
						<label style="display: flex;align-items: center;margin-right: 20rpx;">
							<view>
								<radio value="2" :checked="item.checkResult ==2" disabled
									style="transform:scale(0.7)" />
							</view>
							<view>异常</view>
						</label>
					</radio-group>
				</view>
				<view class="pic-box">
					<view class="top">
						<view class="label">
							<text style="color: red;margin-right: 4rpx;">*</text>
							现场照片: (最多6张)
						</view>
					</view>
					<view class="pics" v-if="item.fileList.length>0">
						<view v-for="(item2,index) in item.fileList" class="pic-item">
							<view class="">
								<image :src="item2" mode="" class="pic" @tap="scanImage(item,index)"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="row" style="align-items: normal;">
					<view class="label">
						<text style="color: red;margin-right: 4rpx;" v-if="item.checkResult==2">*</text>
						<text style="color: red;margin-right: 4rpx;visibility: hidden;" v-else>*</text>
						{{item.checkResult==2?'异常说明:':'检查说明:'}}
					</view>
					<textarea class="text-area" v-model="item.notes" disabled auto-height maxlength="200" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BaseApi from "@/api/BaseApi";
	import ApiDefine from "@/api/ApiDefine";
	import HeadBarView from "@/pages/components/head_bar_view.vue";
	export default {
		name: 'submit',
		components: {
			HeadBarView
		},
		data() {
			return {
				checkOptions: [],
				taskUnitFiles: [],
				currentId: 0,
				current: 0,
				form: {
					id: '',
					taskId: '',
					taskUnitFiles: []
				},
				value: '',
				fileList: ['http://warehouse-api.lanbeiduo.com/api/file/download/close.png',
					'http://warehouse-api.lanbeiduo.com/api/file/download/close.png',
					'http://warehouse-api.lanbeiduo.com/api/file/download/close.png',
					'http://warehouse-api.lanbeiduo.com/api/file/download/close.png',
					'http://warehouse-api.lanbeiduo.com/api/file/download/close.png',
					'http://warehouse-api.lanbeiduo.com/api/file/download/close.png'
				],
				address: ''
			};
		},
		onLoad(options) {
			BaseApi.instance().fetch(ApiDefine.checkOption, {}, "GET", {
				"Token": localStorage.getItem('x-token')
			}).then(res => {
				this.checkOptions = res.result
				console.log(JSON.parse(options.item), 'opts')
				let row = JSON.parse(options.item)
				//row.id  unitFile
				BaseApi.instance().fetch(ApiDefine.unitFile, {
					taskUnitId: row.id
				}, "GET", {
					"Token": localStorage.getItem('x-token')
				}).then(res2 => {
					let checkOptions = row.checkOptions.map(item => Number(item.id))
					this.form.id = row.id
					this.form.taskId = row.taskId
					console.log(checkOptions, 'checkOptions')
					let arr = []
					this.checkOptions.forEach(item => {
						if (checkOptions.includes(item.id)) {
							item.children.forEach(m => {
								let obj = res2.result.find(n => n.checkOptionId == m.id)
								if (obj) {
									m.checkResult = obj.checkResult
									m.fileList = obj.pictures.split(',')
									m.notes = obj.notes
									m.system = obj.system
									m.checkOptionId = obj.checkOptionId
									m.checkOption = obj.checkOption
									m.pictures = obj.pictures
								} else {
									m.checkResult = 1
									m.fileList = []
									m.notes = ''
									m.system = item.name
									m.checkOptionId = m.id
									m.checkOption = m.name
									m.pictures = ''
								}
							})
							arr.push(item)
						}
					})
					this.taskUnitFiles = arr
					console.log(this.taskUnitFiles, 'this.taskUnitFiles')
				})

			})
		},
		methods: {
			changeTab(index) {
				this.currentId = index
			},
			radioChange(val, item) {
				console.log(val, 'val', item)
				item.checkResult = val.detail.value
				this.$forceUpdate()
			},
			addImage(item) {
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'],
					success: (res) => {
						console.log(res.tempFilePaths, 'res.tempFilePaths')
						// if (res.tempFilePaths.length + this.fileList.length > 3) {
						// 	// this.$showToast({
						// 	// 	title: '最多上传3张图片！'
						// 	// });
						// 	return
						// }
						let token = localStorage.getItem('x-token')
						//alert(res.tempFilePaths)
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'http://warehouse-api.lanbeiduo.com/api/file/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								header: {
									'Token': token
								},
								success: (res) => {
									//alert(JSON.stringify(res))
									let data = JSON.parse(res.data)
									let image = data.result
									item.fileList.push(image)
									this.$forceUpdate()
								},
								fail: (res) => {

								}
							});
						}
					}
				})
			},
			scanImage(item, index) {
				uni.previewImage({
					current: index,
					urls: item.fileList
				});
			},
			deleteImage(item, index) {
				item.fileList.splice(index, 1)
				this.$forceUpdate()
			},
			submit() {
				let valid = true
				this.taskUnitFiles.forEach(item => {
					let imgArr = []
					item.children.forEach(m => {
						if (m.fileList.length > 0) {
							m.fileList.forEach(n => {
								imgArr.push(n)
							})
							m.pictures = imgArr.join(',')
							imgArr = []
						} else {
							valid = false
						}
						if (m.checkResult == 2 && !m.notes) {
							valid = false
						}
						let ids = this.form.taskUnitFiles.map(item => item.id)
						if (!ids.includes(m.id)) {
							this.form.taskUnitFiles.push(m)
						}
					})
				})
				if (!valid) {
					BaseApi.instance().showToast('请填写完整信息');
					return;
				}
				console.log(this.form, 'this.form')
				BaseApi.instance().fetch(ApiDefine.unitReport, this.form, "POST", {
					"Token": localStorage.getItem('x-token'),
					"content-type": "application/json"
				}).then(res => {
					if (res.code == 200) {
						BaseApi.instance().showToast('提交成功');
						uni.navigateBack()
					}
				})
			},
			cancle() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit-box {
		.tabs {
			font-size: 26rpx;
			display: flex;
			padding: 10rpx;
			position: fixed;
			width: 100%;
			z-index: 999;
			top: 88px;
			background-color: #fff;

			.tab {
				margin: 0rpx 10rpx;
				padding-bottom: 10rpx;
			}

			.active {
				border-bottom: 6rpx solid #3072F6;
			}
		}

		.option-list {
			font-size: 26rpx;
			padding: 100rpx 20rpx 120rpx 20rpx;

			.item {
				.row {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.label {
						margin-right: 10rpx;
					}

					.text-area {
						font-size: 26rpx;
						width: 560rpx;
						min-height: 160rpx;
						color: #999999;
						border: 1px solid #E6E6E6;
					}
				}

				.pic-box {
					margin-bottom: 20rpx;

					.top {
						display: flex;
						align-items: center;

						.btn {
							width: 80rpx;
							height: 44rpx;
							color: #fff;
							text-align: center;
							line-height: 44rpx;
							border-radius: 8rpx;
							background: linear-gradient(90deg, #64ACF6 0%, #3F77F4 100%);
							margin-left: 20rpx;
						}
					}

					.pics {
						display: flex;
						flex-wrap: wrap;

						.pic-item {
							position: relative;
							margin: 20rpx 20rpx 20rpx 0;

							.pic {
								width: 200rpx;
								height: 200rpx;
							}

							.del-icon {
								width: 46rpx;
								height: 46rpx;
								position: absolute;
								top: 0;
								right: 0rpx;
							}
						}
					}
				}
			}
		}
	}
</style>